<mat-card id="recover-card">
  <mat-card-header>
    <mat-card-title>找回密码</mat-card-title>
    <mat-card-subtitle>发送邮件以找回密码</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content id="recover-content">
    <form [formGroup]="formModel">
      <mat-form-field>
        <input matInput placeholder="Email" formControlName="email" required>
        <mat-icon matSuffix svgIcon="email"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','email')">
          Email不能为<strong>空</strong>
        </mat-error>
        <mat-error *ngIf="formModel.hasError('email','email') && !formModel.hasError('required','email')">
          请输入<strong>正确</strong>的Email
        </mat-error>

        <mat-error *ngIf="formModel.hasError('minlength','email')|| formModel.hasError('maxlength','email')">
          Email长度为<strong>6-255</strong>之间
        </mat-error>
      </mat-form-field>

      <img class="captcha-img" src="{{imgUrl}}" *ngIf="imgUrl" (click)="changeCaptcha()" alt="" matTooltip="点击刷新验证码"
           [matTooltipPosition]="'right'">

      <mat-form-field style="width: 150px">
        <input matInput placeholder="验证码" formControlName="captcha" required>
        <mat-icon matSuffix svgIcon="textsms"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','captcha')">
          验证码不能为<strong>空</strong>
        </mat-error>
      </mat-form-field>
    </form>
  </mat-card-content>
  <mat-card-actions align="end">
    <button mat-button color="primary" [routerLink]="'../login'">登录</button>
    <button mat-button color="accent" (click)="onSubmit()">发送</button>
  </mat-card-actions>
</mat-card>
